<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ysm个人主页</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
	<link rel="stylesheet" type="text/css" href="shoye.css">
</head>

<body>
<!-- <div class="all"> </div>-->
<style>
    *
    {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    ul{
        list-style: none;
    }
    a{
        text-decoration: none;
    }
    body{
        background-color:#f5f5f5 ;
    }
    .banner{
        width: 100%;
        position: relative;
        overflow: hidden;
    }
    .banner ul:first-child{
        width: 1000%;
        transform: translateX(-10%);
        -webkit-transform: translateX(-10%);
    }
    .banner ul li{
        float: left;
        width: 10%;
    }
    .banner ul li a{
        display: block;
        width: 100%;
    }
    .banner ul li img{
        display: block;
        width: 100%;
    }
    .banner ul:last-child{
        position: absolute;
        width: 118px;
        height: 6px;
        left: 50%;
        margin-left:-59px;
        bottom: 6px;
    }
    .banner ul:last-child li{
        width: 6px;
        height: 6px;
        border-radius: 3px;
        border: 1px solid #fff;
        margin-left:10px;
        float: left;
    }
    .banner ul:last-child li:first-child{
        margin-left: 0;
    }
    .banner ul:last-child .now{
        background: #fff;
    }
</style>
<body>
    <!--轮播图-->
    <div class="banner">
        <ul>
            <li><a href="#"><img src="https://s1.ax1x.com/2020/10/13/0h1Myq.jpg" alt=""></a></li>
            <li><a href="#"><img src="https://s1.ax1x.com/2020/10/13/0h1uSs.jpg" alt=""></a></li>
            <li><a href="#"><img src="https://s1.ax1x.com/2020/10/13/0h11mV.jpg" alt=""></a></li>
            <li><a href="#"><img src="https://s1.ax1x.com/2020/10/13/0h1D0K.jpg" alt=""></a></li>
            <li><a href="#"><img src="https://s1.ax1x.com/2020/10/13/0h1mWj.jpg" alt=""></a></li>
            <li><a href="#"><img src="https://s1.ax1x.com/2020/10/13/0h13wT.jpg" alt=""></a></li>
            <li><a href="#"><img src="https://s1.ax1x.com/2020/10/13/0h18TU.jpg" alt=""></a></li>
            <li><a href="#"><img src="https://s1.ax1x.com/2020/10/13/0h1JkF.jpg" alt=""></a></li>
            <li><a href="#"><img src="https://s1.ax1x.com/2020/10/13/0h3l3d.jpg" alt=""></a></li>
            <li><a href="#"><img src="https://s1.ax1x.com/2020/10/13/0h3Q9H.jpg" alt=""></a></li>
        </ul>
        <ul>
            <li class="now"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
<script>
    window.onload = function () {
    banner();
    };
    var banner = function () {
        /*1. 自动轮播图且无缝   定时器，过渡*/
        /*2. 点要随着图片的轮播改变  根据索引切换*/
        /*3. 滑动效果  利用touch事件完成*/
        /*4. 滑动结束的时候    如果滑动的距离不超过屏幕的1/3  吸附回去   过渡*/
        /*5. 滑动结束的时候    如果滑动的距离超过屏幕的1/3  切换（上一张，下一张）根据滑动的方向，过渡*/
	    /*轮播图*/
        var banner = document.querySelector('.banner');
        /*屏幕宽度*/
        var width = banner.offsetWidth;
        /*图片容器*/
        var imageBox = banner.querySelector('ul:first-child');
        /*点容器*/
        var pointBox = banner.querySelector('ul:last-child');
        /*所有的点*/
        var points = pointBox.querySelectorAll('li');
        var addTransition = function () {
            imageBox.style.transition = 'all 0.2s';
            imageBox.style.webkitTransition = 'all 0.2s';
        }
        var removeTransition = function () {
            imageBox.style.transition = 'none';
            imageBox.style.webkitTransition = 'none';
        }
        var setTranslateX = function (translateX) {
            imageBox.style.transform = 'translateX(' + translateX + 'px)';
            imageBox.style.webkitTransform = 'translateX(' + translateX + 'px)';
        }
        /*程序的核心 index */
        var index = 1;
        var timer = setInterval(function () {
            index++;
            /*加过渡*/
            addTransition();
            /*做位移*/
            setTranslateX(-index * width);
        }, 1000);
        /*需要等最后一张动画结束去判断 是否瞬间定位第一张*/
        imageBox.addEventListener('transitionend', function () {
            /*自动滚动的无缝*/
            if (index >= 9) {
                index = 1;
                /*瞬间定位*/
                /*清过渡*/
                removeTransition();
                /*做位移*/
                setTranslateX(-index * width);
            }
            /*滑动的时候也需要无缝*/
            else if (index <= 0) {
                index = 8;
                /*瞬间定位*/
                /*清过渡*/
                removeTransition();
                /*做位移*/
                setTranslateX(-index * width);
            }
            /*根据索引设置点*/
            /*此时此刻  index  的取值范围  1-8（0,8--1,9）*/
            /*点索引  index - 1 */
            setPoint();
        });
        /*设置点的方法*/
        var setPoint = function () {
            /*index 1-8*/
            /*清除样式*/
            for (var i = 0; i < points.length; i++) {
                var obj = points[i];
                obj.classList.remove('now');
            }
            /*给对应的加上样式*/
            points[index - 1].classList.add('now');
        }
        /*绑定事件*/
        var startX = 0;
        var distanceX = 0;
        var isMove = false;
        banner.addEventListener('touchstart', function (e) {
            /*清除定时器*/
            clearInterval(timer);
            /*记录起始位置的X坐标*/
            startX = e.touches[0].clientX;
        });
        banner.addEventListener('touchmove', function (e) {
            /*记录滑动过程当中的X坐标*/
            var moveX = e.touches[0].clientX;
            /*计算位移  有正负方向*/
            distanceX = moveX - startX;
            /*计算目标元素的位移  不用管正负*/
            /*元素将要的定位=当前定位+手指移动的距离*/
            var translateX = -index * width + distanceX;
            /*滑动--->元素随着手指的滑动做位置的改变*/
            removeTransition();
            setTranslateX(translateX);
            isMove = true;
        });
        banner.addEventListener('touchend', function (e) {
            /*4.  5.  实现*/
            /*要使用移动的距离*/
            if (isMove) {
                if (Math.abs(distanceX) < width / 3) {
                    /*吸附*/
                    addTransition();
                    setTranslateX(-index * width);
                } else {
                    /*切换*/
                    /*右滑动 上一张*/
                    if (distanceX > 0) {
                        index--;
                    }
                    /*左滑动 下一张*/
                    else {
                        index++;
                    }
                    /*根据index去动画的移动*/
                    addTransition();
                    setTranslateX(-index * width);
                }
            }
            /*最好做一次参数的重置*/
            startX = 0;
            distanceX = 0;
            isMove = false;
            /*加上定时器*/
            clearInterval(timer);
            timer = setInterval(function () {
                index++;
                /*加过渡*/
                addTransition();
                /*做位移*/
                setTranslateX(-index * width);
            }, 1000);
        });
    }
</script>
</div>
</body>
</html>